<template>
  <div class="PullDownTextarea">
    <vxe-pulldown ref="PullDownTextarea" class="edit-down-pulldown" transfer>
      <template>
        <el-input
          v-model="row[column.property]"
          :size="$store.getters.size"
          readonly
          v-bind="options"
          @focus="clickEvent"
        />
      </template>
      <template v-slot:dropdown>
        <el-input
          ref="textarea"
          v-model="row[column.property]"
          type="textarea"
          resize="none"
          v-bind="options"
          @input="$emit('change')"
        />
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
export default {
  name: 'PullDownTextarea',
  props: {
    params: Object,
    renderOptions: Object,
    options: Object
  },
  data() {
    return {
      row: null,
      column: null,
      props: null
    }
  },
  watch: {
    params() {
      this.load()
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      const { row, column } = this.params
      this.row = row
      this.column = column
    },
    clickEvent() {
      this.$refs.PullDownTextarea.showPanel().then(() => {
        this.$refs.textarea.focus()
      })
    },
    suffixClick() {
      this.$refs.PullDownTextarea.togglePanel()
    }
  }
}
</script>

<style lang="scss" scoped>
.PullDownTextarea {
  .edit-down-pulldown {
    width: 100%;
  }
  /deep/.el-input {
    .el-input__inner {
      height: 24px;
    }
  }
}
</style>
